<script setup>
import { ref } from 'vue';
import Nav from './components/Nav.vue';
import { getSinemaApi } from '@/api/sinema';

const list = ref([])
const getobj=ref({
  pagenum:0,
  pagesize:10,
  area:'上海',
  // price:'asc',
  
})


// loading:控制加载转圈特效
const loading = ref(false);
// finished：没有更多的数据
const finished = ref(false);

const onLoad =async () => {
  // 1.第一次加载数据或上拉加载更多数据时，loading会变成true 我们不用写
  // 异步更新数据
  // 2.setTimeout 仅做示例，真实场景中一般为 ajax 请求到服务器要数据
  // 3.数据加载完毕后手动关闭loading loading=>false
  // 4.当数据加载完毕时，finished finished=>true

  getobj.value.pagenum++

   const {data:res}=await getSinemaApi(getobj)
   list.value=[...list.value,...res.list]
   console.log(res);
   loading.value=false
   if(list.value.length>=res.total){
    finished.value=true
   }
  
};


</script>

<template>
  <!-- 头部 -->
  <Nav v-model="getobj"></Nav>
  <!-- 影院列表 -->

  <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">

    <van-cell v-for="item in list" :key="item.area_id" center>
      <template #title>
        <van-card :title="`${item.title}`" :desc="`${item.address}`">
        </van-card>

      </template>
      <template #extra>
        <div style="display: flex; align-items: center; flex-direction: column; color: #ff5f16;">
          <span style="font-size: 12px;">￥ <span style="font-size: 16px; ">{{ item.avg_price }}</span><span style="font-size: 12px;">起</span></span>
          <span style="color: #b3b5b8;">距离未知</span>
        </div>
      </template>
    </van-cell>

  </van-list>



</template>

<style scoped lang="less">
.van-cell {
  padding: 10px;
  background-color: #ffffff;

  .van-card {
    height: 40px;
    background-color: #ffffff;
  }

}
</style>